<template>

  <div class="table-box">
    <Table
        ref="table"
        :searchColumns="searchColumns"
        description_keywords="description"
        @getTableList="getTableList"
    >
      <template #tableHeader="scope">
        <el-button type="primary" :icon="CirclePlus" @click="descriptionDrawerStore.showDescriptionFrom('create')">
          新增说明文档
        </el-button>
      </template>
      <template #table>
        <!-- 表格主体 -->
        <el-table :data="tableList"
                  border
                  style="width: 100%">
          <el-table-column prop="title" align="center" label="描述标题"/>
          <el-table-column prop="keywords" align="center" label="唯一标识"/>
          <el-table-column prop="create_time" align="center" label="创建时间" width="200"/>
          <el-table-column prop="update_time" align="center" label="最近修改时间" width="200"/>
          <el-table-column align="center" fixed="right" label="操作" width="150px">
            <template #default="scope">
              <el-button
                  size="small"
                  @click="descriptionDrawerStore.showDescriptionFrom('view',scope.row.keywords)"
              >预览
              </el-button>
              <el-button
                  size="small"
                  @click="descriptionDrawerStore.showDescriptionFrom('update',scope.row.keywords)"
              >编辑
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </Table>
  </div>


</template>

<script setup name="descriptionManage">

// 需要搜索的配置项
import {onMounted, onUnmounted, ref} from "vue";
import {CirclePlus, Delete} from "@element-plus/icons-vue";
import Table from "@/components/Table/index.vue";
import {ElMessage} from "element-plus";
import MavonEditor from "@/components/MavonEditor/index.vue"
import {useDescriptionDrawerStore} from "@/stores/modules/system/descriptionDrawer.js";
import {getDescriptionListApi} from "@/api/modules/system/description.js";


const descriptionDrawerStore = useDescriptionDrawerStore()

const searchColumns = ref([
  {label: "描述标题", field: "title", searchType: "input"},
  {label: "唯一标识", field: "keywords", searchType: "input"},
  {label: "描述内容", field: "value", searchType: "input"},
])

const tableList = ref([])

onMounted(() => {
  getTableList()
})

const table = ref(null)
const searchArgsDict = ref({})
const getTableList = async (searchArgs) => {
  const {data} = await getDescriptionListApi(searchArgs)
  searchArgsDict.value = searchArgs
  tableList.value = data.data
  table.value.pageable.pageNum = data.page
  table.value.pageable.pageSize = data.pagesize
  table.value.pageable.total = data.total
}

// 监听描述抽屉页关闭的事件
$eventBus.on("cancelDescriptionFrom", () => {
  getTableList(searchArgsDict.value)
})

onUnmounted(() => {
  $eventBus.off("cancelDescriptionFrom")
})


</script>

<style scoped lang="scss">

</style>
